Stacked Bar Chart এবং Stacked Column Chart দুটি জনপ্রিয় চার্ট টাইপ যা একাধিক ক্যাটেগরির মধ্যে তুলনা প্রদর্শন করতে ব্যবহৃত হয়। এদের মধ্যে Stacked Bar Chart অনুভূমিক (horizontal) আকারে এবং Stacked Column Chart উল্লম্ব (vertical) আকারে ডেটা প্রদর্শন করে।
এই চার্টগুলো বিভিন্ন শ্রেণির ডেটাকে স্তরবদ্ধ করে দেখায়, যা বিশ্লেষণের জন্য খুবই কার্যকর।
১. Stacked Bar Chart
Stacked Bar Chart একাধিক ডেটা সিরিজকে অনুভূমিকভাবে স্তরবদ্ধ করে উপস্থাপন করে। এটি বিভিন্ন বিভাগ এবং উপাদানগুলির তুলনা করতে সাহায্য করে, যাতে প্রতিটি বিভাগের অবদান স্পষ্টভাবে দৃশ্যমান হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked Bar Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStackedBarChart);
function drawStackedBarChart() {
var data = google.visualization.arrayToDataTable([
['City', '2015', '2016', '2017'],
['New York', 1000, 1200, 1300],
['Los Angeles', 700, 800, 950],
['Chicago', 500, 600, 700],
['Houston', 400, 500, 600],
['Phoenix', 300, 400, 500]
]);
var options = {
title: 'City Population by Year',
chartArea: {width: '50%'},
hAxis: {title: 'Population'},
vAxis: {title: 'City'},
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('stacked_bar_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Stacked Bar Chart Example</h2>
<div id="stacked_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা প্রস্তুতি: এখানে আমরা ২০১৫, ২০১৬, এবং ২০১৭ সালের জন্য পাঁচটি শহরের জনসংখ্যার ডেটা দিয়েছি।
- isStacked অপশন:
isStacked: trueসেট করলে চার্টটি স্ট্যাকড (stacked) হবে, অর্থাৎ সব ডেটা সিরিজ একসাথে স্তরবদ্ধ হবে। - অপশন কাস্টমাইজেশন: চার্টের শিরোনাম, এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের লেবেল কাস্টমাইজ করা হয়েছে।
২. Stacked Column Chart
Stacked Column Chart স্তরবদ্ধ বার চার্টের মতোই কাজ করে, তবে এটি উল্লম্ব (vertical) আকারে ডেটা উপস্থাপন করে। এটি বিভিন্ন উপাদানের অবদান দেখতে সাহায্য করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked Column Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStackedColumnChart);
function drawStackedColumnChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales 2020', 'Sales 2021', 'Sales 2022'],
['January', 400, 500, 600],
['February', 600, 700, 800],
['March', 800, 900, 1000],
['April', 1000, 1100, 1200],
['May', 1200, 1300, 1400]
]);
var options = {
title: 'Sales by Year',
chartArea: {width: '50%'},
hAxis: {title: 'Sales (in USD)'},
vAxis: {title: 'Month'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('stacked_column_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Stacked Column Chart Example</h2>
<div id="stacked_column_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা প্রস্তুতি: এখানে ২০২০, ২০২১, এবং ২০২২ সালের মার্চ মাসের সেলস ডেটা প্রদর্শিত হয়েছে।
- isStacked অপশন:
isStacked: trueসেট করে ডেটাকে স্তরবদ্ধভাবে প্রদর্শন করা হয়েছে, যাতে প্রতিটি বছরের সেলস ডেটা একসাথে দেখা যায়। - অপশন কাস্টমাইজেশন: চার্টের শিরোনাম, এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের লেবেল কাস্টমাইজ করা হয়েছে।
Stacked Bar এবং Stacked Column Chart এর উপকারিতা
- বিভিন্ন শ্রেণির তুলনা: Stacked Charts আপনাকে একাধিক শ্রেণির ডেটাকে তুলনা করার সুযোগ দেয় এবং একই সাথে প্রতিটি শ্রেণির অবদান স্পষ্টভাবে দেখা যায়।
- পারফরমেন্স বিশ্লেষণ: এটি বিভিন্ন সময় বা অবস্থার মধ্যে পারফরমেন্স বা অবদান বিশ্লেষণ করতে সাহায্য করে।
- স্পষ্ট ও সহজ ভিজ্যুয়ালাইজেশন: একাধিক উপাদানের স্তরবদ্ধভাবে প্রদর্শন ডেটা আরও স্পষ্ট এবং সহজভাবে বোঝা যায়।
উপসংহার
Stacked Bar Chart এবং Stacked Column Chart দুটি অত্যন্ত কার্যকরী ভিজ্যুয়ালাইজেশন টুল যা ডেটার বিশ্লেষণ এবং তুলনার জন্য ব্যবহৃত হয়। এগুলোর মাধ্যমে আপনি একাধিক ডেটা সিরিজকে সহজে তুলনা করতে এবং প্রতিটি অংশের অবদান দেখতে পারবেন। Google Charts এর মাধ্যমে এই ধরনের চার্ট তৈরি করা সহজ এবং প্রয়োজনীয় কাস্টমাইজেশনও করা সম্ভব।
Read more
